import React from 'react';
import ReactDom from 'react-dom';
import './alchemy.scss';
import { api } from 'js/api/api';
import Button from 'views/component/button/button';
import utils from 'js/core/utils';
import iconData from 'js/data/iconData';
import {
    totalConfig,
    propName
} from 'server/config/templateConfig';
let drugsListConfig = totalConfig.make[420001].drugsList;

class Drugs extends React.Component {
    constructor() {
        super()
        this.state = {
            selectItem: null,
            selectId: null,
        }
    }
    select = (item, index) => {
        this.setState({ selectItem: item, selectId: index })
    }
    makeDrug = () => {
        api('makeDrug', { id: parseInt(this.state.selectId) }, () => {

        });
    }
    getInfo = () => {
        let item = this.state.selectItem
        if (item) {
            let needItems = item.needItems;
            let node = <div>
                {needItems.map((item, index) => {
                    return <div key={index}>{propName[item[0]]}x{item[1]}</div>
                })}
                <div>金钱x{item.needGold}</div>
                <button onClick={this.makeDrug}>制作</button>
            </div>

            return node;
        }
    }
    render() {
        let { selectId } = this.state;
        return <div className="flex drugs">
            <div className="list">
                {Object.entries(drugsListConfig).map(([id, item], index) => {
                    return <div className={"item" + (selectId === id ? ' active' : '')} key={index} onClick={() => { this.select(item, id) }}>
                        {propName[item.itemId]}
                    </div>
                })}
            </div>
            <div className="info">{this.getInfo()}</div>
        </div>
    }
}


class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            showType: 1
        }
    }
    componentDidMount() {
    }
    close = () => {
        this.props.close();
    }
    render() {
        let { showType } = this.state;
        let node;
        if (showType === 1) {
            node = <Drugs />
        }
        return <div id="alchemy" className="flex-col">
            <div className="head">炼金所</div>
            <div className="desc">这里是冒险者的聚集地.冒险者们在这里休息调整,交流他们的冒险经验.</div>
            <div className="flex-g-1">{node}</div >
            <div className="menu flex">
                <div className={"bag menu-item flex-center" + (showType === 1 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 1 }) }}>
                    <div>药品制作</div>
                </div>
                <div className={"team menu-item flex-center" + (showType === 2 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 2 }) }}>
                    <div>材料冶炼</div>
                </div>
                <div className={"team menu-item flex-center" + (showType === 3 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 3 }) }}>
                    <div>炼金所老板</div>
                </div>
                <div className="flex-g-1"></div>
                <div className="team menu-item flex-center" onClick={this.close}>
                    <div>离开</div>
                    <div className="fonts fonts-arrow-right2"></div>
                </div>
            </div>
        </div>
    }
}

export default Main;